<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆界面</title>
    <script src="../static/jquery-3.2.1.min.js"></script>
    <script src="../static/bootstrap.min.js"></script>
    <script type="text/javascript">
        document.write('<link rel="stylesheet" href="../static/login.css?v=' + Math.random() + '">');
    </script>
    <style>

    </style>
</head>
<body style="margin: 0px">
<div class="cover"></div>
<div id="login_frame">

    <div id="image_logo">Server Test And Config</div>
    <form method="post" action="login.js">
        <div id="password" class="clear">
            <label class="label_input">IP</label>
            <input type="text" id="pwd1" class="text_field" value="{{ ip }}"/>
        </div>
        <div id="password" class="clear">
            <label class="label_input">端口</label>
            <input type="text" id="pwd2" class="text_field" value="{{ port }}" readonly/>
        </div>
        <div id="password" class="clear">
            <label class="label_input">用户名</label>
            <input type="text" id="pwd3" class="text_field" value="{{ user }}"/>
        </div>
        <div id="password" class="clear">
            <label class="label_input">密码</label>
            <input type="text" id="pwd4" class="text_field" value="{{ password }}"/>
        </div>

        <div class="forget_pwd">
            <a id="test" >测试连接</a>
            <a id="save" >保存</a>
        </div>
    </form>
</div>

<script type="text/javascript">
   $("#test").click(function () {
       $('#pwd1').attr('readOnly',true)
       $('#pwd4').attr('readOnly',true)
       $('#pwd3').attr('readOnly',true)
       var ip = $('#pwd1').val()
       var port = $('#pwd2').val()
       var user = $('#pwd3').val()
       var password = $('#pwd4').val()
       $('#image_logo').text('Server Test .....')
       conf = {'ip':ip,'port':port,'user':user,'password':password}
        $.post('/login-server',conf,function (data) {
            alert(data)
            $('#image_logo').text('Server Test And Config')
            $('#pwd1').attr('readOnly',false)
            $('#pwd4').attr('readOnly',false)
            $('#pwd3').attr('readOnly',false)
        })
   })
    $("#save").click(function () {
        var ip = $('#pwd1').val()
       var port = $('#pwd2').val()
       var user = $('#pwd3').val()
       var password = $('#pwd4').val()
       conf = {'ip':ip,'port':port,'user':user,'password':password}
        $.post('/updata',conf,function (data) {
            alert(data)
        })
    })

</script>
</body>
</html>